<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clistbox{
            height: 225px;
            width: 600px;
            position: relative;
            margin: 50px auto;
            border-bottom: 1px solid cadetblue;
        }
        .clistbox div{
            position: absolute;
            width: 45px;
            text-align: center;
            height: 200px;
            margin-left: 285px;
            box-shadow: -2px -2px 3px #cccccc;
            transform-origin: bottom;
            opacity: 0.6;
            transition: 2s;
            border-radius: 5px;
            cursor: pointer;


        }
        .clistbox div:nth-of-type(1) {background-color: darkorchid;}
        .clistbox div:nth-of-type(2) {background-color: cadetblue }
        .clistbox div:nth-of-type(3) {background-color: crimson}
        .clistbox div:nth-of-type(4) {background-color: cyan}
        .clistbox div:nth-of-type(5) {background-color: chartreuse}
        .clistbox div:nth-of-type(6) {background-color: cornflowerblue}
        .clistbox div:nth-of-type(7) {background-color: coral}
        .clistbox div:nth-of-type(8) {background-color: fuchsia}
        .clistbox div:nth-of-type(9) {background-color: mediumorchid}
        .clistbox div:nth-of-type(10){background-color: moccasin}
        .clistbox div:nth-of-type(11){background-color: firebrick}
        .clistbox div:nth-of-type(12){background-color: rebeccapurple}
        .clistbox div:nth-of-type(13){background-color: blanchedalmond}
        .clistbox div:nth-of-type(14){background-color: cadetblue}
        .clistbox:hover div:nth-of-type(2){transform: rotate(15deg);}
        .clistbox:hover div:nth-of-type(3){transform: rotate(30deg);}
        .clistbox:hover div:nth-of-type(4){transform: rotate(45deg);}
        .clistbox:hover div:nth-of-type(5){transform: rotate(60deg);}
        .clistbox:hover div:nth-of-type(6){transform: rotate(75deg);}
        .clistbox:hover div:nth-of-type(7){transform: rotate(90deg);}
        .clistbox:hover div:nth-of-type(8){transform: rotate(0deg);}
        .clistbox:hover div:nth-of-type(9){transform: rotate(-15deg);}
        .clistbox:hover div:nth-of-type(10){transform: rotate(-30deg);}
        .clistbox:hover div:nth-of-type(11){transform: rotate(-45deg);}
        .clistbox:hover div:nth-of-type(12){transform: rotate(-60deg);}
        .clistbox:hover div:nth-of-type(13){transform: rotate(-75deg);}
        .clistbox:hover div:nth-of-type(14){transform: rotate(-90deg);}
    </style>
</head>
<body>
<div class="clistbox">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
</div>
</body>
</html>